<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding:0;
		margin:0;
	}
		#box{
			width: 200px;
			height: 200px;
			background: pink;
			margin:50px auto 0;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<a href="http://www.baidu.com" id="btn">百度一下</a>
</body>
</html>
<script>
	//鼠标事件
	var boxDiv = document.getElementById("box");
	boxDiv.onclick = function(){

		//执行的顺序
		//onmosedown > onmoseup > onclick
		console.log("点击事件");
		//阻止冒泡，阻止事件向父级传递
		// e.stopPropagation();

		//ie下阻止,部分其他新浏览器已经支持
		//e.cancelBubble = true;
	};
	//鼠标按下,小写
	boxDiv.onmousedown = function(){
		console.log("鼠标按下")
	};
	//鼠标抬起
	boxDiv.onmouseup = function(){
		console.log("鼠标抬起");
	};
	//鼠标进入元素上方时的事件
	boxDiv.onmouseover = function(){
		console.log("进来的");
		this.style.borderRadius = "50%";
	};
	//鼠标离开元素上方时的效果
	boxDiv.onmouseout = function(){
		console.log("出去了");
		this.style.borderRadius = 0;
	};
	document.onmouseover = function(){

	};
	//onmouseout 和 onmoueleave 是鼠标离开元素时的效果，只不过
	/*document.onmouseover = function(){
		console.log(666);
	 };*/

	 boxDiv.onmousemove = function(){
	 	console.log("移动鼠标");
	 };

	 //右键事件
	 document.onmousemenu = function(e){
	 	console.log("点击了右键");
	 	//阻止网页的默认行为
	 	e.preventDefault();
	 };
	 btn.onclick = function(){
	 	console.log("999");
	 	//通过on绑定的事件称为普通绑定
	 	//也可以阻止网页的默认行为
	 	return false;
	 };

	 document.onclick = function(e){
	 	console.log("你好吗");
	 };
	 
</script>